<!-- -->
<template>
  <div id='loginpassword'>
    <div class="tradetop">登录密码设置</div>
    <div class="tradesell">
    <div class="warning">&nbsp;请务必确认登录密码与安全密码完全不同！密码相同会导致安全密码失效，使您的帐户资金无法得到安全保障。</div>
      <div class="message">
          <ul>
              <li>旧密码：&emsp;&emsp;&emsp;<input :type="type1" v-model="password1" placeholder="请输入旧密码" ><i class="iconfont icon-yueduliang" @click="typeitem1"></i></li>
              <li>新密码：&emsp;&emsp;&emsp;<input :type="type2" v-model="password2" placeholder="请输入新密码" ><i class="iconfont icon-yueduliang" @click="typeitem2"></i></li>
              <li>确认新密码：&emsp;<input :type="type3" v-model="password3" placeholder="请再次确认新密码" ><i class="iconfont icon-yueduliang" @click="typeitem3"></i></li>
          </ul>
      </div>
      <div class="btn">
          <button @click="verification">确定修改</button>
          <!-- <button>取消</button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginpassword",
  data() {
    return {
      password1: "",
      password2: "",
      password3: "",
      type1: "password",
      type2: "password",
      type3: "password"
    };
  },
  methods: {
    typeitem1() {
      this.type1 == "password"
        ? (this.type1 = "text")
        : (this.type1 = "password");
    },
    typeitem2() {
      this.type2 == "password"
        ? (this.type2 = "text")
        : (this.type2 = "password");
    },
    typeitem3() {
      this.type3 == "password"
        ? (this.type3 = "text")
        : (this.type3 = "password");
    },
    verification() {
      if (!this.password1 || !this.password2 || !this.password3) {
        this.$message({ message: "密码不能为空", type: "error" });
      } else if (this.password2 !== this.password3) {
        this.$message({ message: "密码不一致", type: "error" });
      } else {
        this.axios
          .post("User/user_pass_cl", {
            npassword: this.password2,
            opassword: this.password1
          })
          .then(({ data }) => {
            console.log(data.status);
            if (data.status === "1") {
              this.$message({ message: "旧密码不正确", type: "error" });
            } else if (data.status === "2") {
              (this.password1 = ""),
                (this.password2 = ""),
                (this.password3 = ""),
                this.$message({ message: "修改成功", type: "success" });
            } else if (data.status === "3") {
              this.$message({ message: "修改失败", type: "error" });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    open2() {
      this.$message({
        message: "操作成功",
        type: "success"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
#loginpassword {
  .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size: 13px;
    font-family: MicrosoftYaHei-Bold;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
  }
  .tradesell {
    .warning {
      width: 600px;
      margin-top: 15px;
      margin-left: 25px;
      margin-bottom: 30px;
      padding-left: 5px;
      font-size: 11px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      background: rgba(255, 247, 230, 1);
      border-radius: 2px;
      line-height: 31px;
      border: 1px solid rgba(224, 3, 0, 1);
    }
    .message {
      margin-left: 40px;
      margin-top: 10px;
      li {
        line-height: 50px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        position: relative;
        span {
          font-weight: 700;
        }
        .iconfont {
          position: absolute;
          left: 275px;
        }
      }
      input {
        width: 209px;
        height: 33px;
        padding-left: 5px;
        border-radius: 2px;
        border: 1px solid rgba(151, 151, 151, 1);
      }
    }
    .btn {
      margin-top: 50px;
      margin-left: 40px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
      }
      button:nth-of-type(2) {
        margin-left: 25px;
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
      p {
        font-size: 11px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        line-height: 30px;
      }
    }
  }
}
</style>